<template>
  <el-dialog :visible.sync="visible"
             append-to-body
             :close-on-click-modal="false"
             width="1100px"
             custom-class="div-background"
             :before-close="handleClose">
    <div slot="title">
      <span>{{$t('custom.dashboard.title')}}</span>
      <view-linked-info :linkKey="'Dashboard'"></view-linked-info>
    </div>
    <!-- <el-form :model="dataForm"
             :rules="dataRule"
             :inline="false"
             ref="dataForm"
             @keyup.enter.native="dataFormSubmitHandle()"
             label-width="180px"
             v-loading="loading"
             label-position="right"> -->
    <div>
      <!-- <div class="search-div" style="">
            <el-input  placeholder="Search"></el-input>
        </div> -->
      <el-container>
        <el-aside width="710px">
          <el-tabs value="Published">
            <el-tab-pane label="Published"
                         name="Published">
              <div style="height:220px;display:flex;flex-wrap: wrap;align-content:space-between;margin-top:5px;padding:0 5px">
                <div class="cursor_pointer widget_card"
                     v-for="(layoutItem,index) in layoutListsOfDashboard"
                     :key="layoutItem.key"
                     style="width: 100px;height: 100px;padding:10px;"
                     :style="(index+1)%6===0?'margin-right:0':'margin-right:20px'">
                  <div @click="selectGadget(layoutItem)">
                    <img :src="layoutItem.imageUrl"
                         style="width: 40px;height: 40px;display: block;"
                         fit="fill">
                    <div class="bottom clearfix"
                         style="width:80px;margin-top:6px">
                      <span style="font-weight:500;font-size:12px;color:#404040;line-height:17px;word-break:break-all;overflow: hidden;">{{layoutItem.title.split(' ')[0]}}</span><br>
                      <span style="font-weight:500;font-size:12px;color:#404040;line-height:17px;word-break:break-all;overflow: hidden;">{{layoutItem.title.split(' ')[1]}}</span>
                    </div>
                  </div>
                </div>
              </div>
              <div style="margin-top:20px">
                <!-- <el-pagination style="text-align: center;"
                                 layout="prev, pager, next"
                                 :current-page.sync="currentPage"
                                 :page-size="12"
                                 :total="totalRecord">
                  </el-pagination> -->
              </div>
            </el-tab-pane>
          </el-tabs>
        </el-aside>
        <el-main>
          <div class="right-text">
            <h2>Create your Dashboard</h2><br>
            <span>Create your own custom widget using our new, intuitive widgets.</span><br>
            <h3>Select widget type to start creating your widget or view tutorial to learn more.</h3><br>
            <!-- <el-button size="small" type="primary">View Tutorial</el-button> -->
          </div>

        </el-main>
      </el-container>
    </div>

    <!-- </el-form> -->
  </el-dialog>

</template>
<script>
import bus from '@/components/storybook/utilties/bus'
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      layoutListsOfDashboard: [
        {
          title: 'Dashboard',
          key: 'report_layout',
          imageUrl: 'https://oss.mspbots.ai/app/mspbots_theme_icon/grid.png'
        },
        {
          title: 'Report',
          key: 'report_layout_page',
          imageUrl: 'https://oss.mspbots.ai/app/mspbots_theme_icon/report.png'
        }
      ]
    }
  },
  created () {
    bus.$on('cloneNewDashboard', (data) => {
      this.$emit('update:visible', false)
    })
  },
  beforeDestroy () {
    bus.$off('cloneNewDashboard')
  },
  methods: {
    selectGadget (item) {
      this.$emit('item-click', item)
      this.$parent.openReportModal('create')
    },
    handleClose (done) {
      this.$emit('update:visible', false)
      done()
    }

  }
}
</script>
<style lang="scss">
.cursor_pointer {
  cursor: pointer;
}
.widget_card {
  box-shadow: 0 0 8px 0 #f0f0f0;
  border: 1px solid #fcfcfc;
}
.widget_card:hover {
  box-shadow: 0 2px 12px -4px #c2c7d0;
  border: 1px solid #fcfcfc;
}
.right-text {
  white-space: normal;
  word-break: normal;
}
.div-background {
  background-image: url("#{$--ossLink}/app/gadget/select-widget-background.png") !important;
  background-repeat: no-repeat !important;
  background-position: right bottom !important;
  background-size: contain !important;
}
.search-div {
  width: 200px;
  margin-bottom: 10px;
  margin-top: -10px;
}
.div-background ::v-deep .el-tabs__header {
  width: 30% !important;
  margin: 0 0 15px !important;
}
.widget_data_list {
  margin-top: 20px;
  min-height: 20px;
  .el-checkbox-group {
    > .is-checked {
      border: 1px solid #138dc7;
      .el-checkbox__inner {
        // background-image: url('../../../../assets/add_reports_radio_selected.png');
        // background-repeat: no-repeat;
        // background-position: center;
        // background-size: 14px 14px;
      }
      .el-checkbox__inner::after {
        // transform: rotate(0deg) scaleY(0);
      }
    }
    .el-checkbox__inner {
      // border: 0;
      // background-image: url('../../../../assets/add_reports_radio.png');
      // background-repeat: no-repeat;
      // background-position: center;
      // background-size: 14px 14px;
      // background-color: transparent;
    }
  }
  .el-checkted {
    // border: 1px solid #138DC7 !important;
  }
  .el-checkbox {
    display: block;
    margin-right: 0;
    background: #ffffff;
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    margin-top: 10px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    .el-checkbox__input {
      display: block;
      width: 54px;
      text-align: center;
    }
    .el-checkbox__label {
      flex: 1;
      display: block;
      height: 100%;
      padding-left: 0;
      .item_widget3 {
        // background: url('../../../../assets/grid.png');
        background-size: 48px 48px;
        background-repeat: no-repeat;
        background-position: left center;
        height: 100%;
        padding-left: 54px;
        padding-top: 5px;
        padding-bottom: 5px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        min-height: 70px;
        .item_widget_content {
          flex: 1;
          height: 100%;
          padding-right: 10px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          > div {
            white-space: pre-wrap;
            word-break: break-word;
          }

          > div:nth-child(1) {
            color: #000;
            font-size: 14px;
          }
          > div:nth-child(2) {
            font-size: 14px;
            color: rgba(0, 0, 0, 0.49);
          }
        }
        .item_widget_ri {
          float: right;
          width: 53px;
          height: 100%;
          text-align: center;
          .item {
            height: 14px;
            width: 14px;
            border: 0;
            // background: url("../../../assets/select_widget_eye.png");
            background-size: 14px 14px;
            background-repeat: no-repeat;
            background-position: center;
          }

          // box-shadow: -1px 0px 0px 0px #F0F0F0;
          // margin: 5px 0;
        }
        position: relative;
      }
      .item_widget3::after {
        content: "";
        clear: both;
        display: block;
        overflow: hidden;
        // height: 0;
        position: absolute;
        right: 53px;
        border-right: 1px solid #f0f0f0;
        height: 80%;
      }
    }
  }
  .el-checkbox::after {
    content: ".";
    clear: both;
    display: block;
    overflow: hidden;
    height: 0;
  }
}
</style>